<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 权限管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button @click='toAdd' v-if="$_has('resource:add')" type="primary" size="mini">添加权限</el-button>
                <el-button @click='batchDelete'  v-if="$_has('resource:batchDelete')" type="primary" size="mini">批量删除</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="40"   align="center"></el-table-column>
                <el-table-column prop="id" label="编码"  align="center" >
                </el-table-column>
                <el-table-column prop="name" label="资源名称"   align="center">
                </el-table-column>
                <el-table-column prop="type" label="类型"  align="center">
                </el-table-column>
                <el-table-column prop="url" label="地址"  align="center" width="250px">
                </el-table-column>
                <el-table-column prop="permission" label="权限"   align="center">
                </el-table-column>
                <el-table-column prop="parentId" label="上级编码"   align="center">
                </el-table-column>
                <el-table-column prop="icon" label="图标"  align="center" >
                </el-table-column>
                <el-table-column prop="external" label="是否外部连接"   align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.external == false" style="color: red">禁用 </span>
                        <span v-if="scope.row.external == true" >启用</span>
                    </template>
                </el-table-column>

                <el-table-column prop="available" label="是否禁用"  align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.available == false" style="color: red">禁用 </span>
                        <span v-if="scope.row.available == true" >启用</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button size="mini" @click="changePower(scope.$index, scope.row)" v-if="$_has('resource:edit')" type="text"   icon="el-icon-edit">修改</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
            <el-pagination
                    background
                    @current-change="handleCurrentChange" :page-size="10" :pager-count="11" layout="prev, pager, next" :current-page="pageCount" :total="total"
            ></el-pagination>
        </div>
        </div>
        <el-dialog title="添加权限" :visible.sync="dialogVisible" width="40%" :append-to-body='true'>
            <!--表单内容-->
            <el-form ref="form" :model="form" label-width="20%" :rules='rules' :hide-required-asterisk='true'>
                <el-form-item label="资源名称" prop='name'>
                    <el-input v-model="form.name" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item label="资源类型" prop='type'>
                    <el-select
                            class="size-full"
                            size="mini"
                            v-model="form.type"
                            placeholder="请选择"
                            clearable
                            style="width:60%"
                    >
                        <el-option label="菜单" value="menu "></el-option>
                        <el-option label="按钮" value="button "></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" prop='url	'>
                    <el-input v-model="form.url" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item label="权限" prop='permission'>
                    <el-input v-model="form.permission" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item label="上级id" prop='parentId'>
                    <el-input v-model="form.parentId" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop='sort'>
                    <el-input v-model="form.sort" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item label="是否外部连接" prop='external'>
                    <el-select
                            class="size-full"
                            size="mini"
                            v-model="form.external"
                            placeholder="请选择"
                            clearable
                            style="width:60%"
                    >
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否禁用" prop='available'>
                    <el-select
                            class="size-full"
                            size="mini"
                            v-model="form.available"
                            placeholder="请选择"
                            clearable
                            style="width:60%"
                    >
                        <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图标" prop='icon'>
                    <el-input v-model="form.icon" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item class='deviceManage-el-form-item information-el-form-item'>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
<!--    <div class="roleManage">-->
<!--        <el-row type="flex" class="row-bg" justify="space-between">-->
<!--            <el-col :span="20">-->
<!--                <div class="add-btn">-->
<!--                    <el-button @click='toAdd' v-if="$_has('resource:add')">添加权限</el-button>-->
<!--                    <el-button @click='batchDelete'  v-if="$_has('resource:batchDelete')">批量删除</el-button>-->
<!--                </div>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">-->
<!--            <el-table-column type="selection" width="40" ></el-table-column>-->
<!--            <el-table-column prop="id" label="编码" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="name" label="资源名称" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="type" label="类型">-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="url" label="地址" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="permission" label="权限" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="parentId" label="上级编码" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="icon" label="图标" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="external" label="是否外部连接" >-->
<!--                <template slot-scope="scope">-->
<!--                    <span v-if="scope.row.external == false" style="color: red">禁用 </span>-->
<!--                    <span v-if="scope.row.external == true" >启用</span>-->
<!--                </template>-->
<!--            </el-table-column>-->

<!--            <el-table-column prop="available" label="是否禁用" >-->
<!--                <template slot-scope="scope">-->
<!--                    <span v-if="scope.row.available == false" style="color: red">禁用 </span>-->
<!--                    <span v-if="scope.row.available == true" >启用</span>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="操作" >-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button size="mini" @click="changePower(scope.$index, scope.row)" v-if="$_has('resource:edit')">修改</el-button>-->

<!--                </template>-->
<!--            </el-table-column>-->
<!--        </el-table>-->
<!--        <el-pagination @current-change="handleCurrentChange" :page-size="10" :pager-count="11" layout="prev, pager, next" :current-page="pageCount" :total="total">-->
<!--        </el-pagination>-->
<!--        <el-dialog title="添加权限" :visible.sync="dialogVisible" width="40%" :append-to-body='true'>-->
<!--            &lt;!&ndash;表单内容&ndash;&gt;-->
<!--            <el-form ref="form" :model="form" label-width="20%" :rules='rules' :hide-required-asterisk='true'>-->
<!--                <el-form-item label="资源名称" prop='name'>-->
<!--                    <el-input v-model="form.name" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="资源类型" prop='type'>-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="form.type"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                            style="width:60%"-->
<!--                    >-->
<!--                        <el-option label="菜单" value="menu "></el-option>-->
<!--                        <el-option label="按钮" value="button "></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="地址" prop='url	'>-->
<!--                    <el-input v-model="form.url" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="权限" prop='permission'>-->
<!--                    <el-input v-model="form.permission" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="上级id" prop='parentId'>-->
<!--                    <el-input v-model="form.parentId" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="排序" prop='sort'>-->
<!--                    <el-input v-model="form.sort" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="是否外部连接" prop='external'>-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="form.external"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                            style="width:60%"-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in options"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="是否禁用" prop='available'>-->
<!--                    <el-select-->
<!--                            class="size-full"-->
<!--                            size="mini"-->
<!--                            v-model="form.available"-->
<!--                            placeholder="请选择"-->
<!--                            clearable-->
<!--                            style="width:60%"-->
<!--                    >-->
<!--                        <el-option-->
<!--                                v-for="item in options1"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="图标" prop='icon'>-->
<!--                    <el-input v-model="form.icon" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item class='deviceManage-el-form-item information-el-form-item'>-->
<!--                    <el-button type="primary" @click="onSubmit">确定</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--        </el-dialog>-->
<!--    </div>-->
</template>

<script>
    import getData from '../../../getData/api'
    export default {
        name: "roleManage",
        data(){
            return{
                options: [{
                    value: false,
                    label: '否'
                }, {
                    value: true,
                    label: '是'
                }],
                options1: [{
                    value: false,
                    label: '禁用'
                }, {
                    value: true,
                    label: '生效'
                }],
                tableData:[],//表格DATA
                pageCount:1,//页数
                total:1,//总条数
                dialogVisible:false,//添加用户的弹窗
                form:{//添加的对象
                    id:'',
                    name:'',//资源名称
                    type	:'',//资源类型 menu / button
                    url:'',//地址
                    permission:'',//权限
                    parentId	:'',//上级id
                    sort:'',//排序
                    external:'',//是否外部连接 true/false
                    available	:'',//是否禁用 true/false
                    icon:'',//图标
                },
                rules:{//必填校验
                    available: [{
                        required: true,
                        message: '状态不能为空',
                        trigger: 'blur'
                    }],
                    name: [{
                        required: true,
                        message: '角色编码不能为空',
                        trigger: 'blur'
                    }],
                    description:[{
                        required: true,
                        message: '角色名称不能为空',
                        trigger: 'blur'
                    }],
                },
                multipleSelection:[],
            }
        },
        methods:{
            //批量
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //批量删除
            batchDelete(){
                this.$confirm('确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids=[];
                    Object.keys(this.multipleSelection).forEach((key) => {
                        ids.push(this.multipleSelection[key].id)
                    });
                    let params = {
                        "ids": ids,
                    };
                    let formData = new FormData();
                    Object.keys(params).forEach((key) => {
                        formData.append(key, params[key]);
                    });//转form-data
                    getData.userRemove(formData)
                        .then(res => {
                            this.search()
                            if (res.status == 200) {

                                this.$message.success(res.message)
                            }
                        })
                })
            },
            //翻页触发
            handleCurrentChange(val) {
                //每次翻页都请求数据
                this.pageCount = val
                this.search()
            },
            //添加权限
            toAdd() {
                if (this.form.id!=''){
                    this.initFormData()
                }
                this.dialogVisible = true;//添加角色的弹窗
            },
            //提交添加权限
            onSubmit() {
                //先校验form的必填项
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        let formData = new FormData();
                        Object.keys(this.form).forEach((key) => {
                            formData.append(key, this.form[key]);
                        });//转form-data，后台要求
                        if (this.form.id=='') {//id为空就是添加。不为空就是修改
                            getData.addPowerData(formData)
                                .then((res) => {
                                    this.search()
                                    this.dialogVisible = false;
                                    if (res.status==200){
                                        this.$message.success(res.message)
                                    }
                                })
                        }else {
                            getData.editPowerData(formData)
                                .then((res) => {
                                    this.search()
                                    this.dialogVisible = false;
                                    if (res.status==200){
                                        this.$message.success(res.message);
                                        getData.findUserResources(params)
                                            .then((res) => {
                                                if (res.status == 200) {
                                                    for (let i = 0; i < res.data.length; i++) {
                                                        if (res.data[i].nodes == null) {
                                                            res.data[i].nodes = [];
                                                        }
                                                    }
                                                    localStorage.setItem('resourcesrList', JSON.stringify(res.data));//后台返回的权限
                                                }
                                            })
                                    }
                                })
                        }
                    } else {
                        return false;
                    }});
            },
            //弹出修改权限
            changePower(index,row){
                Object.keys(this.form).forEach(key => {
                    this.form[key] = row[key]
                })
                this.dialogVisible=true
                console.log(this.form)
            },
            //请求权限List数据
            search(){
                let params = {
                    "pageNumber":this.pageCount,
                    "pageSize":10,
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.resourcesData(formData)
                    .then(res=>{
                        console.log(res)
                        this.tableData=res.rows
                        this.total=res.total
                    })
            },
            initFormData() {//清空新增修改之类的所有数据
                this.form={
                    id:'',
                    name:'',//资源名称
                    type	:'',//资源类型 menu / button
                    url:'',//地址
                    permission:'',//权限
                    parentId	:'',//上级id
                    sort:'',//排序
                    external:'',//是否外部连接 true/false
                    available	:'',//是否禁用 true/false
                    icon:'',//图标
                }
            }
        },

        mounted(){
            this.search();

            // console.log(this.$route)
        },

    }
</script>

<style scoped>
    @import '~assets/styles/main.css';
    /*搜索框*/
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
